<!--
 * @Author: wangze@linkstec.com
 * @Date: 2022-01-21 11:00:36
 * @Function: Please Input Function
-->
<template>
  <el-skeleton :loading="loading" animated class="vs-el-skeleton">
    <template slot="template">
      <el-table class="lk-table" :data="dataSkeleton">
        <el-table-column
          v-if="rowSelection"
          type="selection"
          width="55"
          align="center"
          :selectable="selectable"
          :reserve-selection="true"
          fixed></el-table-column>
        <el-table-column v-for="(column,colI) in columnsData" :key="colI" v-bind="column">
          <template slot="header" slot-scope="scope">
            <slot v-if="column['slotHeader']" :name="column['slotHeader']" v-bind="scope"></slot>
            <span v-else>{{ column['label'] || '-' }}</span>
          </template>
          <template>
            <div style="padding: 9px 0;">
              <el-skeleton-item variant="h3 "/>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template>
      <el-table
        ref="elTable"
        class="lk-table"
        v-bind="elTableProps"
        v-on="$listeners">

        <el-table-column
          v-if="rowSelection"
          type="selection"
          width="55"
          align="center"
          :selectable="selectable"
          :reserve-selection="true"
          fixed></el-table-column>

        <el-table-column
          v-for="column in columnsData"
          :key="column.label"
          v-bind="column">
          <template slot="header" slot-scope="scope">
            <!-- 自定义表头 -->
            <slot v-if="column['slotHeader']" :name="column['slotHeader']" v-bind="scope"></slot>
            <!-- 默认表头 -->
            <span v-else>{{ column['label'] || '' }}</span>
          </template>
          <template slot-scope="scope">
            <!-- 预设格式化单元格 -->
            <Format v-if="column.format || column.formatPrefix || column.formatSuffix" :scope="scope" :column="column" />

            <!-- 自定义单元格内容 -->
            <slot v-else-if="column['slotName']" :name="column['slotName']" v-bind="scope"></slot>

            <!-- 默认单元格内容 -->
            <span v-else>
              <template v-if="typeof scope.row[column['prop']] === 'string'">
                {{ scope.row[column['prop']].trim() || '-' }}
              </template>
              <template v-else>
                {{ scope.row[column['prop']] || '-' }}
              </template>
            </span>
          </template>
        </el-table-column>
        <template slot="empty">
          <slot name="empty"><lk-empty description="暂无数据" :image-size="100"></lk-empty></slot>
        </template>
      </el-table>
    </template>
  </el-skeleton>
</template>

<script>
import { Table } from 'element-ui';
import Format from './components/Format.vue';

export default {
  name: 'LkTable',
  components: {
    Format
  },
  props: Object.assign({}, Table.props, {
    columns: {
      type: Array,
      default: () => []
    },
    rowSelection: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: true
    },
    selectable: {
      type: Function,
      default: (row, index) => true
    },
    loading: {
      type: Boolean,
      default: false
    }
  }),
  // 定义属性
  data () {
    return {
      dataSkeleton: new Array(4).fill({}),
      loading: true
    };
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {
    elTableProps: function () {
      const props = {};
      Object.keys(Table.props).forEach(k => {
        typeof this[k] !== 'undefined' && (props[k] = this[k]);

        return props[k];
      });
      return props;
    },
    columnsData: function () {
      this.columns.forEach(item => {
        if (item.width) {
          item.minWidth = item.width;
          delete item.width;
        }
      });
      return this.columns;
    }
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    clearSelection () {
      this.$refs.elTable.clearSelection(arguments);
    },
    toggleRowSelection () {
      this.$refs.elTable.toggleRowSelection(arguments);
    },
    toggleAllSelection () {
      this.$refs.elTable.toggleAllSelection(arguments);
    },
    toggleRowExpansion () {
      this.$refs.elTable.toggleRowExpansion(arguments);
    },
    setCurrentRow () {
      this.$refs.elTable.setCurrentRow(arguments);
    },
    clearSort () {
      this.$refs.elTable.clearSort(arguments);
    },
    clearFilter () {
      this.$refs.elTable.clearFilter(arguments);
    },
    doLayout () {
      this.$refs.elTable.doLayout(arguments);
    },
    sort () {
      this.$refs.elTable.sort(arguments);
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.lk-table{
  color: #333333;

  // head
  ::v-deep thead{
    color: #7B7F8D;
    th{
      font-weight: normal;
    }
  }
  ::v-deep th.el-table__cell{
    background-color: $lk-table-header-background;
  }

  // body
  &.el-table--striped ::v-deep .el-table__body tr.el-table__row--striped td.el-table__cell{
    background-color: $lk-table-striped-background;
  }
  &.el-table--striped ::v-deep .el-table__body tr.refuse-row td.el-table__cell{
    background-color: #FFEDEC;
  }
  // &.el-table--striped ::v-deep .el-table__body tr.hover-row {
  //   &, &.el-table__row--striped {
  //     &, &.current-row {
  //       > td.el-table__cell {
  //         background-color: $--table-row-hover-background-color;
  //       }
  //     }
  //   }
  // }

  ::v-deep &:not(.el-table--border) th.el-table__cell.is-leaf,
  ::v-deep &:not(.el-table--border) td.el-table__cell{
    border-bottom-color: transparent;
  }

  ::v-deep .el-table__empty-block {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    .lk-empty{
      padding: 41px 0;
      height: 252px;
    }
  }
}
// ::v-deep .el-table__fixed,
// ::v-deep .el-table__fixed-right{
//   height: 100% !important;
//   border: none !important;
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
//   width: 12px; /*滚动条宽度*/
//   height: 12px; /*滚动条高度*/
// }
// ::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 6px; /*滚动条的圆角*/
//   background-color: #d4dae4; /*滚动条的背景颜色*/
// }
</style>
